<template>
    <el-card>
         <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="100px">
            <el-form-item label="应用id：" prop="clientId">
                 <el-input v-model="queryParams.clientId" placeholder="应用id" size="small"></el-input>
            </el-form-item>
            <el-form-item label="应用密钥：" prop="clientSecret">
                <el-input v-model="queryParams.clientSecret" placeholder="应用密钥" size="small"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-delete" size="small" @click="resetQuery('queryParams')">清空</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10">
            <el-col :span="24">
                <div style="margin-bottom: 10px">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
                    <el-button type="danger" plain icon="el-icon-delete" size="small"  @click="handleDel($refs.tableRef.selection)">删除</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" ref="tableRef" style="width: 100%" row-key="id" border size="small">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="#" width="50"></el-table-column>
            <el-table-column prop="clientId" label="应用id"></el-table-column>
            <el-table-column prop="clientSecret" label="应用密钥"></el-table-column>
            <el-table-column prop="authorizedGrantTypes" label="授权类型"></el-table-column>
            <el-table-column prop="scope" label="授权范围"></el-table-column>
            <el-table-column prop="accessTokenValidity" label="令牌秒数"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope"> 
                    <el-button type="text" size="mini" @click="handleView(scope.row)" icon="el-icon-view">查看</el-button>
                    <el-button type="text" size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button size="mini" type="text" @click="handleDel(scope.row.id)" icon="el-icon-delete">删除</el-button>
                </template>
           </el-table-column>
        </el-table>
        <el-pagination
            v-show="total>0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="1"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            class="pagination-container"
            :total="total">
        </el-pagination>
         <el-dialog :title="title" :visible.sync="clientFormVisible">
            <el-form :model="clientForm" :rules="clientRules" ref="clientForm" :disabled="isView">
                <el-row :gutter="20">
                  <el-col :span="12">
                      <el-form-item  prop="clientId" label="应用id：" :label-width="formLabelWidth" required>
                          <el-input v-model="clientForm.clientId" autocomplete="off" size="mini" placeholder="请输入应用id"></el-input>
                      </el-form-item>
                  </el-col>
                   <el-col :span="12">
                      <el-form-item prop="clientSecret" label="应用密钥：" :label-width="formLabelWidth" required>
                          <el-input v-model="clientForm.clientSecret" autocomplete="off" size="mini" placeholder="请输入应用密钥"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                      <el-form-item prop="authorizedGrantTypes" label="授权类型：" :label-width="formLabelWidth" required>
                          <el-input v-model="clientForm.authorizedGrantTypes" autocomplete="off" size="mini" placeholder="请输入授权类型"></el-input>
                      </el-form-item>
                  </el-col>
                   <el-col :span="12">
                      <el-form-item prop="scope" label="授权范围：" :label-width="formLabelWidth" required>
                          <el-input v-model="clientForm.scope" autocomplete="off" size="mini" placeholder="请输入授权范围"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                      <el-form-item prop="accessTokenValidity" label="令牌秒数：" :label-width="formLabelWidth" required>
                          <el-input-number v-model="clientForm.accessTokenValidity" placeholder="请输入令牌秒数" controls-position="right" size="mini"></el-input-number>
                      </el-form-item>
                  </el-col>
                   <el-col :span="12">
                      <el-form-item prop="refreshTokenValidity" label="刷新秒数：" :label-width="formLabelWidth" required>
                          <el-input-number v-model="clientForm.refreshTokenValidity" autocomplete="off" size="mini" placeholder="请输入刷新秒数" controls-position="right"></el-input-number>
                      </el-form-item>
                  </el-col>
                </el-row>
                   <el-row :gutter="20">
                  <el-col :span="12">
                      <el-form-item prop="webServerRedirectUri" label="回调地址：" :label-width="formLabelWidth" required>
                          <el-input v-model="clientForm.webServerRedirectUri" placeholder="请输入回调地址" controls-position="right" size="mini" style="width：100%"></el-input>
                      </el-form-item>
                  </el-col>
                   <el-col :span="12">
                      <el-form-item prop="resourceIds" label="资源集合：" :label-width="formLabelWidth">
                          <el-input v-model="clientForm.resourceIds" autocomplete="off" size="mini" placeholder="请输入资源集合"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                 <el-row :gutter="20">
                  <el-col :span="12">
                      <el-form-item prop="authorities" label="权限：" :label-width="formLabelWidth">
                          <el-input v-model="clientForm.authorities" placeholder="请输入权限" controls-position="right" size="mini" style="width：100%"></el-input>
                      </el-form-item>
                  </el-col>
                   <el-col :span="12">
                      <el-form-item prop="autoapprove" label="自动授权：" :label-width="formLabelWidth">
                          <el-input v-model="clientForm.autoapprove" autocomplete="off" size="mini" placeholder="请输入自动授权"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                  <el-row :gutter="20">
                  <el-col :span="24">
                      <el-form-item prop="additionalInformation" label="附加说明：" :label-width="formLabelWidth">
                          <el-input v-model="clientForm.additionalInformation" placeholder="请输入附加说明" controls-position="right" size="mini" style="width：100%"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="!isView">
                <el-button type="primary" @click="handleSubmit('clientForm')" size="small">保存</el-button>
                <el-button @click="clientFormVisible = false" size="small">取消</el-button>
            </div>
         </el-dialog>
    </el-card>
</template>
<script>

import { getClientList,saveClientForm,deleteClient } from '@/api/system/client.api.js'
    export default {
       data() {
           return {
               queryParams: {
                  current: 1,
                  size: 10,
                  clientId: undefined,
                  clientSecret: undefined,
               },
               // 应用管理弹窗
               clientFormVisible: false,
               // 定义表单form
               clientForm: {
                   clientId: undefined,
                   clientSecret: undefined,
                   authorizedGrantTypes: undefined,
                   scope: undefined,
                   accessTokenValidity: undefined,
                   refreshTokenValidity: undefined,
                   webServerRedirectUri: undefined,
                   resourceIds: undefined,
                   authorities: undefined,
                   autoapprove: undefined,
                   additionalInformation: undefined,
               },
               clientRules: {
                   clientId: [{ required: true, message: '请输入客户端id', trigger: 'blur' }],
                    clientSecret: [
                        { required: true, message: '请输入客户端密钥', trigger: 'blur' },
                    ],
                    authorizedGrantTypes: [
                        { required: true, message: '请输入授权类型', trigger: 'blur' },
                    ],
                    scope: [
                        { required: true, message: '请输入授权范围', trigger: 'blur' },
                    ],
                    accessTokenValidity: [
                        { required: true, message: '请输入令牌秒数', trigger: 'blur' },
                    ],
                     refreshTokenValidity: [
                        { required: true, message: '请输入刷新秒数', trigger: 'blur' },
                    ],
                    webServerRedirectUri: [
                        { required: true, message: '请输入回调地址', trigger: 'blur' },
                    ],
               },
               // 表单标题
               title: '新增',
               isView: false,
               // form 表单宽度
               formLabelWidth: '100px',
               tableData: [],
               total: 0,
           }
       },
       mounted() {
          this.getList();
       },
       methods: {
                // 搜索
            handleQuery() {
                this.queryParams.current = 1;
                this.getList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getList();
            },
            handleSizeChange(val) {
                this.queryParams.size = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.queryParams.current = val;
                this.getList();
            },
           getList() {
                getClientList(this.queryParams).then(res=>{
                    if(res.code === 200) {
                        this.tableData = res.data.records;
                        this.total = res.data.total
                    }
                })
           },
           handleAdd() {
               this.isView = false;
               this.clientForm = {
                   clientId: '',
                   clientSecret: '',
                   authorizedGrantTypes: '',
                   scope: '',
                   accessTokenValidity: '',
                   refreshTokenValidity: '',
                   webServerRedirectUri: '',
                   resourceIds: '',
                   authorities: '',
                   autoapprove: '',
                   additionalInformation: '',
               }
               this.$refs["clientForm"] && this.$refs["clientForm"].resetFields();
               this.clientFormVisible = true;
           },
           handleView(row) {
               this.isView = true;
               this.title = '查看';
                this.clientForm = row;
                this.clientFormVisible = true;
           },
           handleEdit(row) {
               this.isView = false;
               this.title = '编辑';
               this.clientForm = JSON.parse(JSON.stringify(row));
               this.clientFormVisible = true;
           },
            handleDel(ids) {
                let clientIds;
                typeof ids === 'string'?clientIds=ids:clientIds=ids.map(item=>item.id).toString();
                if(!ids && clientIds.length===0) {
                    this.$message({
                        type: 'error',
                        message: '请至少选择一条数据'
                    })
                    return;
                }
                this.$confirm('确定将选择的数据删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async () => {
                        const result = await deleteClient(clientIds);
                        if(result.code === 200) {
                             this.$message({
                                type: 'success',
                                message: '删除成功!'
                           });
                          this.getList();
                        }
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
           handleSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    saveClientForm(this.clientForm).then(res=>{
                        if(res.code === 200) {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                });
                            this.clientFormVisible = false;
                             this.getList();
                        }
                    })
                } else {
                    return false;
                }
              });
           }
       }
    }
</script>

<style lang="scss" scoped>
::v-deep .el-input-number--mini {
    width: 100%
}
.pagination-container {
    padding: 10px;
    text-align: right;
}
</style>